<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="机台名称" prop="machineName">
        <el-input v-model="queryParams.machineName" clearable placeholder="请输入机台名称" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="归属门店" prop="type" v-hasPermi="['machine:manage:agent']">
        <el-select v-model="queryParams.storeName" placeholder="请选择归属门店昵称" clearable>
          <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.storeName" :value="item.storeName" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['machine:manage:add']" icon="el-icon-plus" plain size="mini" type="primary"
          @click="handleAdd">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          v-hasPermi="['machine:manage:import']">导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermi="['machine:manage:export']" icon="el-icon-download" plain size="mini" type="warning"
          @click="handleExport">导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :header-cell-style="{ background: '#f4f3f9', color: '#606266' }" border v-loading="loading"
      :data="manageList" @selection-change="handleSelectionChange">
      <el-table-column label="ID" align="center" width="400" prop="shareId">
        <template slot-scope="scope">
          <!-- 在这里嵌入你的自定义组件 -->
          <!-- 使用 scope.row 访问当前行的数据 -->
          <div class="block">
            <el-avatar class="img" shape="square" :size="110" :src="img_url + scope.row.imageURL"></el-avatar>
            <!-- <img src="file://C:/v10/wawaji/uploadPath/1422de04388543d7b0edb81476d541e1.png" alt=""> -->
            <div class="text">
              <div class="text_bott">
                <div class="text_b_title">机台ID</div>
                <div class="text_border">{{ scope.row.machineID }}</div>
              </div>
              <div class="text_top">
                <div class="text_t_title">机台名称</div>
                <div class="text_border">{{ scope.row.machineName }}</div>
              </div>
              <div class="text_bott">
                <div class="text_b_title">货币类型</div>
                <div class="text_border">{{ scope.row.currencyType }}</div>
              </div>
              <div class="text_top">
                <div class="text_t_title">入场份额</div>
                <div class="text_border">{{ scope.row.admissionAmount }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="type.machineType" />
      <el-table-column label="板子" align="center" prop="type.hardwareNumber" min-width="100px">
        <template slot-scope="scope">
          {{
            scope.row.hardwareNumber ? scope.row.hardwareNumber : "未绑定板子"
          }}
        </template>
      </el-table-column>
      <el-table-column label="结算礼品" align="center" prop="good.goodName" min-width="120px" />
      <el-table-column label="归属门店" align="center" prop="store.storeName" v-hasPermi="['machine:manage:agent']"
        min-width="250px" />
      <!--  0 可使用 1 使用中 2 下线  3 维护 -->
      <el-table-column label="机台状态" align="center" prop="status">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">可使用</span>
          <span v-else-if="scope.row.status === 1">使用中</span>
          <span v-else-if="scope.row.status === 2">下线</span>
          <span v-else-if="scope.row.status === 3">维护</span>
        </template>
      </el-table-column>
      <el-table-column label="当前在线人数" align="center" width="120" prop="onlinePeople">
        <template slot-scope="scope">
          {{ scope.row.onlinePeople === null ? 0 : scope.row.onlinePeople }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" :sort-orders="['descending', 'ascending']" :sortable="true" align="center"
        prop="createdTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdTime, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.hardwareNumber" icon="el-icon-video-pause" size="mini" type="text"
            style="color: red" @click="fum_getNoUseList(scope.row)">
            绑定
          </el-button>
          <el-button v-else icon="el-icon-video-pause" size="mini" type="text" @click="fun_untie(scope.row)"
            style="color: green">
            解绑
          </el-button>
          <el-button v-if="scope.row.status != 2" v-hasPermi="['machine:manage:edit']" icon="el-icon-video-pause"
            style="color: gray" size="mini" type="text" @click="handleStatusDown(scope.row)">
            下线
          </el-button>
          <el-button v-if="scope.row.status == 2" v-hasPermi="['machine:manage:edit']" icon="el-icon-video-play"
            style="color: green" size="mini" type="text" @click="handleStatusUp(scope.row)">
            上线
          </el-button>
          <el-button v-hasPermi="['machine:manage:edit']" icon="el-icon-edit" size="mini" type="text"
            @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button v-hasPermi="['machine:manage:remove']" icon="el-icon-delete" size="mini" type="text"
            @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
      @pagination="getList" />

    <!-- 添加或修改机台列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="620px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="机台图片" prop="imageURL" style="margin-bottom: 2px">
          <el-upload :auto-upload="false" :before-upload="beforeUpload" :on-change="handleAvatarChangeIcon"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :show-file-list="false"
            accept="image/jpeg,image/png" action="#">
            <i v-if="form.imageURL === '' || form.imageURL === null" class="el-icon-plus upload"></i>
            <img v-else :src="img_url + form.imageURL" style="width: 100%; height: 150px" />
          </el-upload>
        </el-form-item>
        <el-form-item label="机台名称" prop="machineName">
          <el-input v-model="form.machineName" placeholder="请输入机台名称" />
        </el-form-item>
        <!-- 门店和平台不同显示 -->
        <el-form-item label="所属门店" prop="storeID" v-hasPermi="['machine:manage:stores']" v-if="jue !== 'store'">
          <el-select v-model="form.storeID" placeholder="请选择门店">
            <el-option v-for="item in storeOptions2" :key="item.id" :label="item.storeName" :value="item.id">
              <span style="float: left">{{ item.storeName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属门店" prop="storeID" v-hasPermi="['machine:manage:stores']" v-else>
          <el-select v-model="form.storeID" placeholder="请选择门店" disabled>
            <el-option v-for="item in storeOptions2" :key="item.id" :label="item.storeName" :value="item.id">
              <span style="float: left">{{ item.storeName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 新增时不可添加 修改时可以增加 -->
        <el-form-item label="商品名称" prop="goodID" v-if="title !== '添加机台列表'">
          <el-select v-model="form.goodID" placeholder="请选择商品">
            <el-option v-for="item in goodOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机台类型" prop="typeID" v-if="jue !== 'store'">
          <el-select v-model="form.typeID" placeholder="请选择设备类型">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
                }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货币类型" prop="currencyType">
          <el-select v-model="form.currencyType" clearable placeholder="请选择货币类型">
            <el-option v-for="(item, index) in currencyTypeOptions" :key="index" :disabled="item.disabled"
              :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入场数额" prop="admissionAmount">
          <el-input v-model="form.admissionAmount" placeholder="请输入入场数额" />
        </el-form-item>
        <el-form-item label="最大币数" prop="maxCoins">
          <el-input v-model="form.maxCoins" placeholder="请输入最大币数" />
        </el-form-item>
        <el-form-item label="摄像头协议" prop="protocols" v-if="title === '修改机台列表'">
          <el-input v-model="form.protocols" placeholder="请输入接口协议" v-if="jue !== 'platform'" />
          <el-input v-model="form.protocols" placeholder="请输入接口协议" disabled v-else />
        </el-form-item>
        <el-form-item label="摄像头协议" prop="protocols" v-else>
          <el-input v-model="form.protocols" placeholder="请输入接口协议" disabled />
        </el-form-item>
        <el-form-item label="爆率" prop="rate">
          <el-input v-model="form.rate" placeholder="请输入爆率" />
        </el-form-item>
        <!-- ================================= -->
        <el-form-item label="围观设置" prop="rate">
          <div class="flex_box">
            <el-form-item label="围观人数" prop="rate">
              <el-input v-model="form.maxWatchPeople" placeholder="请输入围观人数" style="width: 100px;" />
            </el-form-item>
            <el-form-item label="围观时间" prop="rate">
              <el-input v-model="form.maxWatchTime" placeholder="请输入围观时间（分钟）" style="width: 180px;" />
            </el-form-item>
          </div>
        </el-form-item>
        <!-- <el-form-item label="投币设置" prop="rate">
          <template style="margin-left: 10px;">
            <el-radio label="1">单局机器</el-radio>
            <el-radio label="2">按局投币</el-radio>
            <el-radio label="3">按币投币</el-radio>
            <el-radio label="4">投币变分</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="固定投币" prop="maxCoins">
          <el-input placeholder="请固定投币设置" />
        </el-form-item> -->
        <el-form-item label="占机设置" prop="maxCoins">
          <div class="flex_box">
            <el-form-item  label="托管时间" prop="custodyTime">
              <div class="flex_box">
                <el-input v-model="form.custodyTime" placeholder="" />
                <span style="margin-left: 10px;">秒</span>
              </div>
            </el-form-item>
            <el-form-item label="占机时间" prop="occupyTime">
              <div class="flex_box">
                <el-input v-model="form.occupyTime" placeholder="" />
                <span style="margin-left: 10px;">秒</span>
              </div>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="连续不中" prop="maxCoins">
          <div class="flex_box">
            <el-form-item label="连续时间" prop="failCountTime">
              <div class="flex_box">
                <el-input v-model="form.failCountTime" placeholder="" />
                <span style="margin-left: 10px;width: 70px;">分钟内</span>
              </div>
            </el-form-item>
            <el-form-item label="不中次数">
              <el-input v-model="form.failCount" placeholder="" />
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="席位/得分">
          <div class="flex_box">
            <el-form-item label="席位设置" prop="SeatNumberSetting">
              <el-input v-model="form.seatNumberSetting" placeholder="" />
            </el-form-item>
            <el-form-item label="得分设置" prop="ScoreSetting">
              <el-input v-model="form.scoreSetting" placeholder="" />
            </el-form-item>
          </div>
        </el-form-item>

        <!-- ================================= -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />
            是否更新已经存在的机台数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate">下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 绑定板子 -->
    <el-dialog :title="title" :visible.sync="open2" append-to-body width="500px">
      <el-form ref="machine_board" :model="machine_board" :rules="machine_board_rules" label-width="80px">
        <el-form-item label="绑定板子" prop="equipmentID">
          <el-select v-model="machine_board.equipmentID" placeholder="请选择板子">
            <el-option v-for="item in board" :key="item.equipmentID" :label="item.hardwareNumber"
              :value="item.equipmentID">
              <span style="float: left">{{ item.hardwareNumber }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fun_bindings()">确 定</el-button>
        <el-button @click="board_cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addManage,
  delManage,
  getManage,
  handleStatusDown,
  handleStatusUp,
  listGood,
  getMachineList,
  listStore,
  updateManage,
  uploadImg,
  getAllStoreNameID,
  listQuery,
  getNoUseList,
  edit,
} from "@/api/machine/manage";
import { listMachineType } from "@/api/machine/machineType";
import { getToken } from "@/utils/auth";

export default {
  name: "Manage",
  data() {
    return {
      // 图片 前缀url
      img_url: this.imgUrl,
      // 新增时用户的信息
      userId: sessionStorage.getItem("userId"),
      deptId: sessionStorage.getItem("deptId"),
      jue: sessionStorage.getItem("jue"),
      daiLi: sessionStorage.getItem("daiLi"),
      // 遮罩层
      loading: true,
      // 所有门店信息
      storeOptions: null,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机台列表表格数据
      manageList: [],
      // 弹出层标题
      title: "",
      // 日期范围
      dateRange: [],
      // 是否显示弹出层
      open: false,
      // 是否显示板子绑定弹窗
      open2: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        machineID: null,
        machineName: null,
        storeID: null,
        typeID: null,
        // equipmentID: null,
        // equipmentModel: null,
        currencyType: null,
        admissionAmount: null,
        maxCoins: null,
        maxPeople: null,
        protocols: null,
        rate: null,
        createdBy: null,
        createdTime: null,
        endTime: null,
      },
      // 表单参数
      form: {},
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 图片上传
        dialogImageUrl: "",
        dialogVisible: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/machine/manage/importData",
      },
      // 表单货币类型选择
      currencyTypeOptions: [
        {
          label: "5G币",
          value: "5G币",
        },
        {
          label: "线下币",
          value: "线下币",
        },
      ],
      // 所属门店名称选择
      storeOptions: [],
      // 新增所属门店
      storeOptions2: [],
      // 设备类型选择
      typeOptions: [],
      // 设备类型选择
      goodOptions: [],
      // 表单校验
      rules: {
        machineName: [
          { required: true, message: "机台名称不能为空", trigger: "blur" },
        ],
        goodID: [
          { required: true, message: "商品名称不能为空", trigger: "blur" },
        ],
        storeID: [
          { required: true, message: "门店名称不能为空", trigger: "blur" },
        ],
        typeID: [
          { required: true, message: "设备类型不能为空", trigger: "blur" },
        ],
        currencyType: [
          { required: true, message: "请选择货币类型", trigger: "change" },
        ],
        admissionAmount: [
          { required: true, message: "入场数额不能为空", trigger: "blur" },
        ],
        maxCoins: [
          { required: true, message: "最大币数不能为空", trigger: "blur" },
        ],
        // protocols: [
        //   { required: true, message: "接口协议不能为空", trigger: "blur" },
        // ],
        rate: [{ required: true, message: "爆率不能为空", trigger: "blur" }],
      },
      machine_board_rules: {
        equipmentID: [
          { required: true, message: "板子不能未空", trigger: "blur" },
        ],
      },
      // 可以绑定的板子列表
      board: [],
      // 要进行绑定的机台
      machine_board: {
        machineID: null,
        equipmentID: null,
      },
    };
  },
  created() {
    // this.role = this.$store.getters.roles
    this.getList();
    this.getAllStoreNameID();
  },
  methods: {
    // 查询所属下拉门店
    getAllStoreNameID() {
      getAllStoreNameID().then((response) => {
        this.storeOptions = response.data;
      });
      // 查询新增下拉门店
      listQuery().then((response) => {
        this.storeOptions2 = response.rows;
        this.storeOptions = response.rows;
      });
    },
    /** 查询机台列表列表 */
    getList() {
      this.loading = true;
      getMachineList(this.queryParams).then((response) => {
        this.manageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // listStore().then(response => {
      //   this.storeOptions = [];
      //   response.data.forEach(item => {
      //     this.storeOptions.push({ value: item.id, label: item.storeName });
      //   })
      // })
      listMachineType().then((response) => {
        this.typeOptions = [];
        response.rows.forEach((item) => {
          // if (item.machineType === "彩票机" || item.machineType === "打分机") {
          this.typeOptions.push({ value: item.id, label: item.machineType });
          // }
        });
      });
      listGood().then((response) => {
        // console.log("商品名称：", response);
        getAllStoreNameID().then((res) => {
          let store = res.data[0];
          this.goodOptions = [];
          // console.log("当前门店id:", store);
          // console.log("当前账号权限:", this.jue);
          response.forEach((item) => {
            if (store.deptId === item.dept_id || this.jue !== 'store') {
              this.goodOptions.push({ value: item.id, label: item.goodName });
            }
          });
          // console.log('该部门的商品名称',this.goodOptions)
        });
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        machineID: null,
        machineName: null,
        // equipmentID: null,
        // storeID: null,
        goodID: null,
        typeID: null,
        imageURL: null,
        // equipmentModel: null,
        currencyType: null,
        admissionAmount: null,
        maxCoins: null,
        // maxPeople: null,
        protocols: null,
        rate: null,
        createdBy: null,
        createdTime: null,
        endTime: null,
        updatedBy: null,
        updaredTime: null,
      };
      this.resetForm("form");
    },
    // 新增 修改默认值
    newExample() {
      // 获取角色身份
      let roles = this.$store.getters.roles;
      for (let i = 0; i < roles.length; i++) {
        if (roles[i] === "store") {
          this.rules = {
            machineName: [
              { required: true, message: "机台名称不能为空", trigger: "blur" },
            ],
            goodID: [
              { required: true, message: "商品名称不能为空", trigger: "blur" },
            ],
            typeID: [
              { required: true, message: "设备类型不能为空", trigger: "blur" },
            ],
            currencyType: [
              { required: true, message: "请选择货币类型", trigger: "change" },
            ],
            admissionAmount: [
              { required: true, message: "入场数额不能为空", trigger: "blur" },
            ],
            maxCoins: [
              { required: true, message: "最大币数不能为空", trigger: "blur" },
            ],
            protocols: [
              { required: true, message: "接口协议不能为空", trigger: "blur" },
            ],
            rate: [
              { required: true, message: "爆率不能为空", trigger: "blur" },
            ],
          };
          break;
        }
      }

      // --------------
      const randomNum = Math.floor(Math.random() * 9000000) + 1000000;
      // 将随机数转换为字符串，并确保它是七位数的字符串
      const randomNumStr = randomNum.toString().padStart(7, "0");
      this.form = {
        machineID: null,
        machineName: null,
        // equipmentID: 'ali' + Math.floor(Math.random() * 9000000 + 1000000).toString().padStart(7, '0'),
        // storeID: null,
        goodID: null,
        typeID: null,
        imageURL: null,
        // equipmentModel: 'a' + Math.floor(Math.random() * 9000000 + 1000000).toString().padStart(7, '0'),
        currencyType: "5G币",
        admissionAmount: 5,
        maxCoins: 5,
        // maxPeople: 5,
        protocols: null,
        rate: 5,
        createdBy: null,
        createdTime: null,
        endTime: null,
        updatedBy: null,
        updaredTime: null,
      };
      this.resetForm("form");
    },
    //图片上传前
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //图片移除
    handleRemove(file) {
      console.log(file);
    },
    //图片显示
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片下载
    handleDownload(file) {
      console.log(file);
    },
    //编辑修剪上传图片，选中文件触发的change事件
    handleAvatarChangeIcon(file, fileList) {
      const isJPG = file.raw.type === "image/jpeg";
      const isPNG = file.raw.type === "image/png";
      // const isLt2M = file.raw.size / 1024 / 1024 < 0.5  //限制上传文件的大小
      if (!isPNG && !isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      } else {
        this.imageUrl = URL.createObjectURL(file.raw); //赋值图片的url，用于图片回显功能
        this.uploadImg(file); //调用上传文件api接口
      }
    },
    uploadImg(file) {
      //文件上传操作
      let formData = new FormData();
      formData.append("file", file.raw);
      uploadImg(formData).then((res) => {
        console.log("图片上传", res, formData);
        this.form.imageURL = res.data.path;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // 增加时间
      this.queryParams.beginTime = this.dateRange[0];
      this.queryParams.endTime = this.dateRange[1];
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.storeName = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.machineID);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 上线下按钮操作 */
    handleStatusUp(row) {
      const machineID = row.machineID || this.ids;
      handleStatusUp(machineID).then((response) => {
        console.log(response);
        this.getList();
      });
    },
    /** 下线按钮操作 */
    handleStatusDown(row) {
      const machineID = row.machineID || this.ids;
    },
    // 获取未绑定的板子
    fum_getNoUseList(row) {
      this.machine_board.machineID = row.machineID;
      getNoUseList().then((response) => {
        this.board = response.rows;
        // this.getList();
      });
      // 弹出板子绑定 弹窗
      this.title = "绑定板子";
      this.open2 = true;
    },
    /** 绑定板子 */
    fun_bindings() {
      this.$refs["machine_board"].validate((valid) => {
        if (valid) {
          if (this.machine_board.machineID != null) {
            edit(this.machine_board).then((response) => {
              this.$modal.msgSuccess("绑定成功");
              this.open2 = false;
              this.machine_board = {
                machineID: null,
                equipmentID: null,
              };
              this.getList();
            });
          }
        }
      });
    },
    // 解开板子
    fun_untie(row) {
      this.machine_board.machineID = row.machineID;
      this.$modal
        .confirm('是否确认解开机台ID为"' + row.machineID + '"的数据的板子？')
        .then(() => {
          return edit(this.machine_board);
        })
        .then(() => {
          this.getList();
          this.open2 = false;
          this.$modal.msgSuccess("解绑成功");
        })
        .catch(() => { });
    },

    // 取消绑定按钮
    board_cancel() {
      this.open2 = false;
      this.machine_board = {
        machineID: null,
        equipmentID: null,
      };
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.newExample();
      this.open = true;
      this.title = "添加机台列表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const machineID = row.machineID || this.ids;
      getManage(machineID).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改机台列表";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.maxWatchPeople = Number( this.form.maxWatchPeople);
          this.form.maxWatchTime = Number(this.form.maxWatchTime);
          this.form.custodyTime = Number(this.form.custodyTime);
          this.form.occupyTime = Number(this.form.occupyTime);
          this.form.failCountTime = Number(this.form.failCountTime);
          this.form.failCount = Number(this.form.failCount);
          this.form.seatNumberSetting = Number(this.form.seatNumberSetting);
          this.form.scoreSetting = Number(this.form.scoreSetting);
          // 点击确定，开始判断人数
          if (this.form.maxWatchPeople > 0) {
            this.form.allowWatch = 1; // 如果大于 0，设置 allowWatch 为 1
          } else {
            this.form.allowWatch = 0; // 否则设置为 0
          }
          if (this.form.machineID != null) {
            this.form.updatedBy = this.$store.state.user.name;
            updateManage(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            this.form.createdBy = this.$store.state.user.name;
            // {userId:this.userId,deptId:this.userId}
            this.form.userId = this.userId;
            this.form.deptId = this.deptId;
            addManage(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const machineIDs = row.machineID || this.ids;
      this.$modal
        .confirm('是否确认删除机台列表编号为"' + machineIDs + '"的数据项？')
        .then(function () {
          return delManage(machineIDs);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "machine/manage/export",
        {
          ...this.queryParams,
        },
        `manage_${new Date().getTime()}.xlsx`
      );
    },

    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "机台导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "/machine/manage/importTemplate",
        {},
        `machine_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style scoped lang="scss">
.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload {
  font-size: 40px;
  margin-top: 20px;
  margin-left: 50px;
  border: 2px dashed #aaa;
  width: 150px;
  height: 150px;
  line-height: 130px;
}

/* 玩家信息块 自定义样式 */
.block {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .img {
    background-color: transparent;
  }

  .text {
    width: 200px;

    .text_top {
      margin-top: 4px;
    }

    .text_top,
    .text_bott {
      display: flex;
      align-items: center;
      border: 2px solid #ebeced;
      box-sizing: border-box;

      div {
        text-align: left;
      }

      .text_t_title,
      .text_b_title {
        background-color: #d3dce6;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
      }

      .text_border {
        text-align: center;
        width: 120px;
      }
    }
  }
}
</style>
